<template>
  <div>
    <el-button type="button" @click="returnCourseList" style="">返回</el-button>
    <div style="display:inline">
      <el-button type="button" @click="sectionDialogVisible = true"
        >新增课程章节</el-button
      >
      <el-dialog
        title="新增"
        :visible.sync="sectionDialogVisible"
        width="50%"
        align="center"
      >
        <el-form :model="dataForm">
          <el-form-item label="章节名称" :label-width="formLabelWidth">
            <el-input v-model="dataForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="章节序号" :label-width="formLabelWidth">
            <el-input
              v-model="dataForm.order"
              autocomplete="off"
              placeholder="序号越小越靠前"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="章节图片"
            :label-width="formLabelWidth"
            style="text-align:left"
          >
            <el-upload
              action=""
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="handleUploadPic"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="章节音频"
            :label-width="formLabelWidth"
            style="text-align:left"
          >
            <el-upload
              action=""
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="handleUploadVoice"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="sectionDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCourseSection">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="4000"
      height="100vh"
    >
      <el-table-column type="index" label="序号" width="100" align="center">
      </el-table-column>
      <el-table-column prop="name" label="章节名称" width="200">
      </el-table-column>
      <el-table-column prop="order" label="章节顺序" width="100">
      </el-table-column>
      <el-table-column prop="cover" label="章节图片" width="350">
        <template width="40" slot-scope="scope">
          <img style="border:none;max-width:40%" :src="scope.row.pictureUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="voice" label="章节音频" width="400">
        <template width="40" slot-scope="scope">
          <audio :src="scope.row.voiceUrl" controls="controls"></audio>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            :disabled="courseStatus !== 0"
            @click="deleteCourseSectionById(scope.$index, scope.row.id)"
          >
            删除
          </el-button>

          <div style="display:inline">
            <el-button
              size="mini"
              type="primary"
              :disabled="courseStatus === 1 || courseStatus === 3"
              @click="editCourseSection(scope.row)"
            >
              编辑
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑"
      align="center"
      :visible.sync="editSectionDialogVisible"
      width="30%"
    >
      <el-form :model="tempForm">
        <el-form-item label="章节名称" :label-width="formLabelWidth">
          <el-input v-model="tempForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节序号" :label-width="formLabelWidth">
          <el-input
            v-model="tempForm.order"
            placeholder="序号越小越靠前"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="章节图片"
          :label-width="formLabelWidth"
          style="text-align:left"
        >
          <el-upload
            action=""
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="handleUpdatePic"
            :file-list="tempForm.picFile"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="章节音频"
          :label-width="formLabelWidth"
          style="text-align:left"
        >
          <el-upload
            action=""
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="handleUpdateVoice"
            :file-list="tempForm.voiceFile"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSectionDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="updateCourseSection">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  ReqGetCourseById,
  ReqAddCourseSection,
  ReqUpdateCourseSection,
  ReqDeleteCourseSectionById,
} from "../../request/index.js";
export default {
  methods: {
    returnCourseList() {
      this.$router.push("/home/student/courseList");
    },
    //-------------------上传文件函数-------------------
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUploadPic(file, fileList) {
      //在data写属性，this指向改变，这里采用箭头函数
      this.dataForm.picFile = file.file;
    },
    handleUploadVoice(file, fileList) {
      this.dataForm.voiceFile = file.file;
    },
    addCourseSection(file, fileList) {
      this.sectionDialogVisible = false;
      this.dataForm.courseId = this.courseId;
      ReqAddCourseSection(this.dataForm).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
          this.getCourseById();
        } else {
          this.$message({
            showClose: true,
            message: "添加失败",
            type: "warning",
          });
        }
      });
    },
    //删除数据
    deleteCourseSectionById(val, rowId) {
      ReqDeleteCourseSectionById({ sectionId: rowId }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "warning",
          });
        }
        this.getCourseById();
      });
    },
    getCourseById() {
      ReqGetCourseById({
        courseId: this.courseId,
      }).then((res) => {
        this.tableData = res.data.section;
      });
    },
    editCourseSection(row) {
      this.editSectionDialogVisible = true;
      this.tempForm.sectionId = row.id;
      this.tempForm.name = row.name;
      this.tempForm.order = row.order;
      this.tempForm.picFile = [
        {
          name: row.pictureName,
          url: row.pictureUrl,
        },
      ];
      this.tempForm.voiceFile = [
        {
          name: row.voiceName,
          url: row.voiceUrl,
        },
      ];
    },
    handleUpdatePic(file) {
      this.tempForm.picFile[0] = file.file;
    },
    handleUpdateVoice(file) {
      this.tempForm.voiceFile[0] = file.file;
    },
    updateCourseSection() {
      this.editSectionDialogVisible = false;
      this.tempForm.picFile = this.tempForm.picFile[0];
      this.tempForm.voiceFile = this.tempForm.voiceFile[0];
      //调用接口
      ReqUpdateCourseSection(this.tempForm).then((res) => {
        if ((res.msg = "成功")) {
          // location.reload();
          this.$message({
            showClose: true,
            message: "更新成功",
            type: "success",
          });
          this.tempForm = {};
          this.getCourseById();
        } else {
          this.$message({
            showClose: true,
            message: "更新失败",
            type: "warning",
          });
        }
      });
    },
  },
  data() {
    return {
      tableData: [],
      userId: "",
      courseId: "",
      courseStatus: 0,
      //新增课程章节
      sectionDialogVisible: false,
      dataForm: {
        name: "",
        order: 0,
        picFile: {},
        voiceFile: {},
      },
      formLabelWidth: "120px",
      //编辑课程章节
      editSectionDialogVisible: false,
      tempForm: {
        name: "",
        order: 0,
        sectionId: "",
        picFile: [],
        voiceFile: [],
      },
    };
  },
  created() {
    this.userId = window.sessionStorage.getItem("userId");
    this.courseId = this.$route.params.courseId;
    this.courseStatus = this.$route.params.courseStatus;
    ReqGetCourseById({
      courseId: this.courseId,
    }).then((res) => {
      this.tableData = res.data.section;
    });
  },
};
</script>
